<template>
  <div>
  <div class="page-container">
    <t-screen title="驾驶舱">
      <dv-border-box-8>
        <el-row>
          <!-- 能源消耗饼状图 -->
          <el-col :span="8" style="width: 100%; height: 200px;">
            <dv-border-box-13>
              <div class="content-wrapper">
                <dv-decoration-7 class="decoration"> 产出统计</dv-decoration-7>
                <el-date-picker v-model="value1" type="datetime" placeholder="请选择日期"
                  style="background-color: transparent;" class="date-picker" />
              </div>
              <div>
                <div ref="chartContainer2" style="width: 100%; height: 200px;"></div>
              </div>
            </dv-border-box-13>
          </el-col>
          <el-col :span="8">

            <el-row style="border-top-width: 20px; margin-top: 20px;">
              <el-col :span="8">
                <dv-decoration-9 style="width:150px;height:150px;margin-left: 25px; font-size: 30px;color: green;">

                  568
                  <!-- 在下面添加一个子元素 -->

                </dv-decoration-9>
                <div
                  style="border-top-width: 20px;width:180px;text-align: center;  font-size: 25px; color: white; font-weight: bold;">
                  运行设备</div>
              </el-col>
              <el-col :span="8">
                <dv-decoration-9
                  style="width:150px;height:150px; font-size: 30px;color: yellow;display: flex; justify-content: center; align-items: center; flex-direction: column;">
                  66

                </dv-decoration-9>
                <div
                  style="border-top-width: 20px;width:150px;text-align: center;  font-size: 25px; color: white; font-weight: bold;">
                  维修设备</div>
              </el-col>
              <el-col :span="8">
                <dv-decoration-9
                  style="width:150px;height:150px;text-align: center;  font-size: 30px;color: red;display: flex; justify-content: center; align-items: center; flex-direction: column;">
                  35

                </dv-decoration-9>
                <div
                  style="border-top-width: 20px;width:150px;text-align: center;  font-size: 25px; color: white; font-weight: bold;">
                  停机设备</div>
              </el-col>
            </el-row>

          </el-col>
          <el-col :span="8">
            <div ref="chartContainer" style="width: 100%; height: 200px;margin-top: 20px;"></div>
            <!-- <dv-capsule-chart :config="config" style="width:100%;height:200px" /> -->
          </el-col>
        </el-row>
        <el-row style=" height: 350px;">
          <el-col :span="6">
            <dv-border-box-11 title="1#车间设备能耗">
              <div style="width:97%;height:260px">
                <dv-scroll-board :config="config2" style=" padding-top: 60px; padding-left: 20px;" />
              </div>

            </dv-border-box-11>
          </el-col>
          <el-col :span="6">
            <dv-border-box-11 title="2#车间设备能耗">
              <div style="width:97%;height:260px">
                <dv-scroll-board :config="config2" style=" padding-top: 60px; padding-left: 20px;" />
              </div>
            </dv-border-box-11>
          </el-col>
          <el-col :span="6">
            <dv-border-box-11 title="3#车间设备能耗">
              <div style="width:97%;height:260px">
                <dv-scroll-board :config="config2" style=" padding-top: 60px; padding-left: 20px;" />
              </div>
            </dv-border-box-11>
          </el-col>
          <el-col :span="6">
            <dv-border-box-11 title="4#车间设备能耗">
              <div style="width:97%;height:260px">
                <dv-scroll-board :config="config2" style=" padding-top: 60px; padding-left: 20px;" />
              </div>
            </dv-border-box-11>
          </el-col>


        </el-row>
        <el-row style="width: 100%; height: 400px;">
          <div ref="chartContainer1" style="width: 100%; height: 100%;"></div>
        </el-row>
      </dv-border-box-8>
    </t-screen>
  </div>
  </div>
</template>
<script setup lang="ts">
import TScreen from "@/components/TScreen/index.vue";
import { ElMessage } from "element-plus";
import deptList from "./getData/getDeptList.json";
import listMonitor from "./getData/getListMonitor.json";
import websocket from "./getData/websocket.json";


import * as echarts from 'echarts';
const value1 = ref('')
// 获取图表容器的引用
const chartContainer = ref<HTMLDivElement | null>(null);
onMounted(() => {
  // 检查 chartContainer 是否有效
  if (chartContainer.value) {
    // 初始化 ECharts 实例
    const myChart = echarts.init(chartContainer.value);

    // 图表配置项
    const option: echarts.EChartsOption = {
      title: {
        text: '销售统计',
        left: 'center',
        textStyle: {
          color: '#FF6347',  // 设置主标题字体颜色
          fontSize: 24,      // 设置主标题字体大小
        },
        subtextStyle: {
          color: '#4682B4',  // 设置副标题字体颜色
          fontSize: 16,      // 设置副标题字体大小
        }
      },
      tooltip: {
        trigger: 'item',
        textStyle: {
          color: '#8B4513',  // 设置提示框中文本的颜色
        }
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        textStyle: {
          color: '#2E8B57',  // 设置图例中的字体颜色
        }
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: '总订单' },
            { value: 735, name: '产品' },
            { value: 580, name: '销售' },
            { value: 484, name: '报废' },
            { value: 300, name: '库存' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };

    // 设置图表的选项
    myChart.setOption(option);

    // 监听窗口尺寸变化，自动调整图表大小
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  }
});
const chartContainer1 = ref<HTMLDivElement | null>(null);
onMounted(() => {
  if (chartContainer1.value) {
    const myChart = echarts.init(chartContainer1.value);

    const colors = ['#5470C6', '#91CC75', '#EE6666'];

    const option1 = {
      color: colors,
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
        },
      },
      grid: {
        right: '20%',
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      legend: {
        data: ['Evaporation', 'Precipitation', 'Temperature'],
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {
            alignWithLabel: true,
          },
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: 'Evaporation',
          position: 'right',
          alignTicks: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: colors[0],
            },
          },
          axisLabel: {
            formatter: '{value}',
          },
        },
        {
          type: 'value',
          name: 'Precipitation',
          position: 'right',
          alignTicks: true,
          offset: 80,
          axisLine: {
            show: true,
            lineStyle: {
              color: colors[1],
            },
          },
          axisLabel: {
            formatter: '{value}',
          },
        },
        {
          type: 'value',
          name: 'Temperature',
          position: 'left',
          alignTicks: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: colors[2],
            },
          },
          axisLabel: {
            formatter: '{value}',
          },
        },
      ],
      series: [
        {
          name: 'Evaporation',
          type: 'bar',
          data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
        },
        {
          name: 'Precipitation',
          type: 'bar',
          yAxisIndex: 1,
          data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
        },
        {
          name: 'Temperature',
          type: 'line',
          yAxisIndex: 2,
          data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
        },
      ],
    };

    myChart.setOption(option1);

    window.addEventListener('resize', () => {
      myChart.resize();
    });
  }
});
// Vue组件部分
const chartContainer2 = ref<HTMLElement>();
const colors = ['#5470C6', '#91CC75', '#EE6666'];

onMounted(() => {
  if (!chartContainer2.value) return;
  var app: any = {};
  // 初始化图表
  const myChart = echarts.init(chartContainer2.value);
  type BarLabelOption = NonNullable<echarts.BarSeriesOption['label']>;
  const posList = [
    'left',
    'right',
    'top',
    'bottom',
    'inside',
    'insideTop',
    'insideLeft',
    'insideRight',
    'insideBottom',
    'insideTopLeft',
    'insideTopRight',
    'insideBottomLeft',
    'insideBottomRight'
  ] as const;

  app.configParameters = {
    rotate: {
      min: -90,
      max: 90
    },
    align: {
      options: {
        left: 'left',
        center: 'center',
        right: 'right'
      }
    },
    verticalAlign: {
      options: {
        top: 'top',
        middle: 'middle',
        bottom: 'bottom'
      }
    },
    position: {
      options: posList.reduce(function (map, pos) {
        map[pos] = pos;
        return map;
      }, {} as Record<string, string>)
    },
    distance: {
      min: 0,
      max: 100
    }
  };
  app.config = {
    rotate: 90,
    align: 'left',
    verticalAlign: 'middle',
    position: 'insideBottom',
    distance: 15,
    onChange: function () {
      const labelOption: BarLabelOption = {
        rotate: app.config.rotate as BarLabelOption['rotate'],
        align: app.config.align as BarLabelOption['align'],
        verticalAlign: app.config
          .verticalAlign as BarLabelOption['verticalAlign'],
        position: app.config.position as BarLabelOption['position'],
        distance: app.config.distance as BarLabelOption['distance']
      };
      myChart.setOption<echarts.EChartsOption>({
        series: [
          {
            label: labelOption
          },
          {
            label: labelOption
          },
          {
            label: labelOption
          },
          {
            label: labelOption
          }
        ]
      });
    }
  };
  const labelOption: BarLabelOption = {
    show: true,
    position: app.config.position as BarLabelOption['position'],
    distance: app.config.distance as BarLabelOption['distance'],
    align: app.config.align as BarLabelOption['align'],
    verticalAlign: app.config.verticalAlign as BarLabelOption['verticalAlign'],
    rotate: app.config.rotate as BarLabelOption['rotate'],
    formatter: '{c}  {name|{a}}',
    fontSize: 16,
    rich: {
      name: {}
    }
  };
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['Forest', 'Steppe', 'Desert', 'Wetland']
    },
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar', 'stack'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    xAxis: [
      {
        type: 'category',
        axisTick: { show: false },
        data: ['2012', '2013', '2014', '2015', '2016']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'Forest',
        type: 'bar',
        barGap: 0,
        label: labelOption,
        emphasis: {
          focus: 'series'
        },
        data: [320, 332, 301, 334, 390]
      },
      {
        name: 'Steppe',
        type: 'bar',
        label: labelOption,
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290]
      },
      {
        name: 'Desert',
        type: 'bar',
        label: labelOption,
        emphasis: {
          focus: 'series'
        },
        data: [150, 232, 201, 154, 190]
      },
      {
        name: 'Wetland',
        type: 'bar',
        label: labelOption,
        emphasis: {
          focus: 'series'
        },
        data: [98, 77, 101, 99, 40]
      }
    ]
  };

  myChart.setOption(option);

  // 响应式调整
  const resizeHandler = () => myChart.resize();
  window.addEventListener('resize', resizeHandler);

  // 清理
  onBeforeUnmount(() => {
    window.removeEventListener('resize', resizeHandler);
    myChart.dispose();
  });
});

const config1 = reactive({
  data: [66],
  waveOpacity: 0.8
})

const config = reactive({
  data: [
    {
      name: '煤',
      value: 167
    },
    {
      name: '水',
      value: 123
    },
    {
      name: '电',
      value: 98
    },
    {
      name: '天然气',
      value: 75
    },
    {
      name: '损耗',
      value: 66
    },
  ],
  colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
  showValue: true,
  labelNum: 8,
})
const config2 = reactive({
  header: ['设备号', '水', '电', '煤', '电'],
  headerBGC: '#060671',
  data: [
    ['设备1', '100', '200', '300', '400'],
    ['设备2', '150', '250', '350', '450'],
    ['设备3', '120', '220', '320', '420'],
    ['设备4', '130', '230', '330', '430'],
    ['设备5', '140', '240', '340', '440'],
    ['设备6', '160', '260', '360', '460'],
    ['设备7', '170', '270', '370', '470'],
    ['设备8', '180', '280', '380', '480'],
    ['设备9', '190', '290', '390', '490'],
    ['设备10', '200', '300', '400', '500']
  ]
})


</script>

<style lang="scss">
.page-container {
  background: linear-gradient(to right, #2a3d66, #060671);
  /* 渐变色：深蓝色到淡蓝色 */
  min-height: 100vh;
  /* 保证背景色覆盖整个页面 */
  color: white;
  /* 设置文字颜色以适应背景 */
  position: relative;
  /* 使子元素可以叠加 */
}

.content-wrapper {
  display: flex;
  align-items: center;
  /* 确保子元素垂直居中对齐 */
}

.decoration {
  width: 150px;
  height: 15px;
  font-size: 10px;
  padding-top: 25px;
  border-right-width: 20px;
  padding-right: 50px;
}

.date-picker {
  /* 给日期选择器添加一些左边距，使其与文字之间有间隔 */
  margin-top: 20px
}
</style>